<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ex_05</title>

		<script type="text/javascript">
			/**
			 * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
			 * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
			 * 		第一个 td 子节点的文本值, 且要去除前后空格.
			 * 2. 若点击 "确认" , 则删除 a 节点的所在的 行
			 * 
			 * 注意:
			 * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
			 * 2. tr 的直接父节点为 tbody, 而不是 table
			 * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数. 
			 * 
			 * 为 #addEmpButton 添加 onclick 响应函数:
			 * 1. 获取 #name, #email, #salary 的文本框的值
			 * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
			 * 		节点价位 tr 节点的子节点
			 * <tr>
			 * 		<td>Tom</td>
			 * 		<td>tom@tom.com</td>
			 * 		<td>5000</td>
			 * </tr>
			 * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>
			 * 4. 把 3 创建的 td 也加为 tr 的子节点. 
			 * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
			 * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能. 
			 */
			window.onload = function() {
				var aNodes = document.getElementById("employeetable")
					.getElementsByTagName("a");
				for(var i = 0; i < aNodes.length; i++) {
					aNodes[i].onclick = function() {
						removeTr(this);
						return false;
					}
				}

				document.getElementById("addEmpButton").onclick = function() {
					var nameValue = document.getElementById("name").value;
					var emailValue = document.getElementById("email").value;
					var salaryValue = document.getElementById("salary").value;

					var nameTd = document.createElement("td");
					var emailTd = document.createElement("td");
					var salaryTd = document.createElement("td");

					nameTd.appendChild(document.createTextNode(nameValue));
					emailTd.appendChild(document.createTextNode(emailValue));
					salaryTd.appendChild(document.createTextNode(salaryValue));

					var trNode = document.createElement("tr");

					trNode.appendChild(nameTd);
					trNode.appendChild(emailTd);
					trNode.appendChild(salaryTd);

					//<td><a href="deleteEmp?id=xxx">Delete</a></td>
					var aNode = document.createElement("a");
					aNode.href = "deleteEmp?id=xxx";
					aNode.appendChild(document.createTextNode("Delete"));

					aNode.onclick = function() {
						removeTr(this);
						return false;
					}

					var aTd = document.createElement("td");
					aTd.appendChild(aNode);

					trNode.appendChild(aTd);

					document.getElementsByTagName("tbody")[0].appendChild(trNode);

					//value：用于获取html表单表单元素的值
					//alert(this.value);
					//nodeValue：用于获取文本节点的文本值
					//alert(this.nodeValue); //null
				}

				function trim(str) {
					var reg = /^\s*|\s*$/g;
					return str.replace(reg, "");
				}

				function removeTr(aNode) {
					var trNode = aNode.parentNode.parentNode;

					var textConent = trNode.getElementsByTagName("td")[0]
						.firstChild.nodeValue;

					textConent = trim(textConent);

					var flag = confirm("确定要删除" + textConent + "的信息吗？");

					if(flag) {
						trNode.parentNode.removeChild(trNode);
					}
				}
			}
		</script>

	</head>

	<body>

		<center>
			<br /><br /> 添加新员工
			<br /><br /> name:
			<input type="text" name="name" id="name" /> &nbsp;&nbsp; email:
			<input type="text" name="email" id="email" /> &nbsp;&nbsp; salary:
			<input type="text" name="salary" id="salary" />
			<br /><br />
			<button id="addEmpButton" value="abc">Submit</button>
			<br /><br />
			<hr />
			<table id="employeetable" border="1" cellspacing="0" cellpadding="5">
				<tbody>
					<tr>
						<td>Name</td>
						<td>Email</td>
						<td>Salary</td>
						<td>&nbsp</td>
					</tr>
					<tr>
						<td>Tom</td>
						<td>tom@tom.com</td>
						<td>5000</td>
						<td>
							<a href="deleteEmp?id=001">Delete</a>
						</td>
					</tr>
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td>
							<a href="deleteEmp?id=002">Delete</a>
						</td>
					</tr>
					<tr>
						<td>Bob</td>
						<td>Bob@tom.com</td>
						<td>10000</td>
						<td>
							<a href="deleteEmp?id=003">Delete</a>
						</td>
					</tr>
				</tbody>
			</table>
		</center>

	</body>

</html>